<template>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row header">
            <div class="col-sm-4 col-md-4 col-lg-4">
              <router-link to="/">
                <button type="button" class="btn btn-default btn-sm">首页
                  <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                </button>
              </router-link>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 text-center">
              <strong>TO: {{name}} 留下你的评价</strong>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 text_align_right">
              <button type="button" @click="pubComment" class="btn btn-primary btn-sm">确认发表
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <Radio @radioChange="radioChange" :items="radioOption"></Radio>
            </div>
            <div class="form-group">
              <label for="zjcontent">评论</label>
              <textarea class="form-control" id="zjcontent" v-model="comment.content" rows="3" placeholder="我宣誓，所填评价真实、客观、公证..."></textarea>
            </div>
          </form>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-6">
              <strong>{{name}} 历史评论</strong>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <div class="spinner" v-if="loading">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
          </div>
          <p class="text-center" v-if="items.length == 0 && loading==false">没有符合条件的数据</p>
          <div class="list-group" v-if="items.length > 0">
            <a href="javascript:;" class="list-group-item" :key=index v-for="(item, index) in items">
              <h4 class="list-group-item-heading">{{item.content}}</h4>
              <div class="list-group-item-text">
                <div class="row">
                  <div class="col-sm-8 col-md-8 col-lg-8">
                    IP地址：<i>{{item.ip?item.ip:'******'}}</i> 时间：<i>{{item.ctime}}</i>
                  </div>
                  <div class="col-sm-4 col-md-4 col-lg-4 text_align_right">
                    <span v-bind:class="['label', item.label_color]">{{item.label_name}}</span>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="@/assets/loading.css" scoped></style>

<style scoped>
strong {font-size:16px;}
.label {
  cursor:pointer;
  margin-right:3px;
}
/*
.list-group-item {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
*/
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .text_align_right {text-align:right;}
}
@media (max-width: 768px) {
  .header > div {
    margin:6px 0;
  }
}
</style>
<script>

import Radio from '@/components/Radio.vue'

export default {
  name: 'Edit',
  components: {
    Radio
  },
  data: function () {
    return {
      name: '',
      loading: true,
      comment: {
        id: 0,
        company_id: 1,
        type: 1
      },
      items: [],
      radioOption: [
        {
          name: 'label',
          value: 1,
          option: '服务赞',
          color: 'btn-success',
          active: true
        },
        {
          name: 'label',
          value: 2,
          option: '服务差',
          color: 'btn-warning',
          active: false
        },
        {
          name: 'label',
          value: 3,
          option: '黑中介',
          color: 'btn-danger',
          active: false
        }
      ]
    }
  },
  created: function () {
    var param = this.$route.query
    if (isNaN(param['id'])) {
      alert('ID非法')
      return false
    }
    this.comment.company_id = param['id']
    this.axios
      .post('/queryevaluate', this.qs.stringify({ id: param['id'] }))
      .then((res) => {
      })
      .catch(function (err) {
        console.log(err)
      })

    this.axios
      .post('/queryevaluate', this.qs.stringify({ id: param['id'] }))
      .then((res) => {
        this.loading = false
        if (res.data.RetCode !== 2000000) {
          alert('系统异常，获取失败')
          return
        }

        if (res.data.Data.length < 1) {
          return false
        }

        this.items = res.data.Data
        let LabelColor = {
          1: 'label-success',
          2: 'label-warning',
          3: 'label-danger'
        }

        let LabelName = {
          1: '赞',
          2: '踩',
          3: '黑'
        }

        this.items.forEach(function (n, i) {
          n.label_color = LabelColor[n.label_type]
          n.label_name = LabelName[n.label_type]
        })
      })
      .catch(function (err) {
        console.log(err)
      })
  },
  mounted: function () {
  },
  methods: {
    radioChange (v) {
      this.comment.type = v
    },
    pubComment () {
      this.axios.post('/saveevaluate', this.qs.stringify(this.comment))
        .then((res) => {
          if (res.data.RetCode !== 2000000) {
            alert('保存失败，' + res.data.Msg)
            return false
          }
          alert('保存成功')
          location.reload()
        })
        .catch((err) => console.log(err))
    }
  }
}
</script>
